import EmptyTip from '@/components/EmptyTip';
import Imagelocation from '@/components/Imagelocation';
import { WrapPageLoadLoading } from '@/components/PageLoadLoading';
import { sourceUrl } from '@/config';
import pRightGray from '@/images/common/rightGray.svg';
import pZhekou from '@/images/common/zhekou.png';
import pZheKouTitle from '@/mainSubPack/images/welfare/taihuzhekou.png';
import pTipHtzx from '@/mainSubPack/images/welfare/tipHtzx.png';
import pTipJcdj from '@/mainSubPack/images/welfare/tipJcdj.png';
import pTipPzbz from '@/mainSubPack/images/welfare/tipPzbz.png';
import { debounce } from '@/utils/helper';
import { Image, ScrollView, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { useEffect } from 'react';
import TheAdvert from '@/components/Advert';
import { connect } from 'react-redux';
import utils from '@/utils/index';
import ProductTitle from '@/components/product/ProductTitle';
import Advert from '../../pages/advert';
import './index.scss';

const Theme = ({ themeGoods = [], recProductParams = {}, dispatch }) => {
  return (
    <View className="themeContent">
      {themeGoods.length > 0 &&
        themeGoods.map((good, index) => (
          <View
            className="goodInfo"
            key={'theme' + good.id + '_' + index}
            onClick={() => utils.goGoodDetail(good, dispatch)}
          >
            <View className="goodIcon">
              <Imagelocation
                className="gIcon"
                src={good.url?.indexOf('http') === 0 ? good.url : sourceUrl + good.url}
              />
            </View>
            <View className="goodBase">
              {/* <Text className="goodName">{good.title}</Text> */}
              <ProductTitle product={good} />
              <Text className="goodPrice">
                <Text className="unit">¥</Text>
                {good.price}
              </Text>
              <Text className="goodSale">已售卖{good.saleNum || 0}件</Text>
            </View>
          </View>
        ))}
      {themeGoods.length == 0 && Object.keys(recProductParams).length > 0 && (
        <EmptyTip type="noProduct" />
      )}
    </View>
  );
};

const pageSize = 20;

const WelfarePage = ({
  dispatch,
  cheaperProductList = [],
  recProductList = [],
  recProductParams = {},
  recProductFinished = false,
  shopIndustryAdjust = [],
}) => {
  const getCheaperProductList = () => {
    dispatch({
      type: 'productList/getCheaperProductList',
      payload: { page: 1, pageSize: 4 },
    });
  };

  const goCheaper = () => {
    Taro.navigateTo({ url: '/pages/mainPages/cheaper/index' });
  };

  const getRecommendProduct = () => {
    dispatch({
      type: 'productList/getRecommendProductByIndustry',
      payload: { pageSize, alias: 'kingKongDistrict' },
    });
  };

  const getShopIndustry = () => {
    dispatch({
      type: 'otherApi/getShopIndustryAdjustModel',
    });
  };

  useEffect(() => {
    getShopIndustry();
    if (cheaperProductList.length === 0) {
      getCheaperProductList();
    }
    getRecommendProduct();
  }, []);

  const pageNavigateTo = (menuItem) => {
    let { name, firstIndustryId = '0', url = '' } = menuItem;
    let pageIdx = url.indexOf('All');
    if (pageIdx == -1) {
      url += '?firstIndustryId=' + firstIndustryId + '&name=' + name;
      dispatch({
        type: 'productList/setShopIndustryProductList',
        payload: {
          shopProductList: [],
          shopProductPagination: {},
          shopProductParams: {},
          shopProductListFinished: false,
        },
      });
    }

    url.length > 0 &&
      Taro.navigateTo({
        url,
      });
  };

  const showNextRecommendProduct = debounce(() => {
    !recProductFinished && getRecommendProduct();
  }, 1200);

  return (
    <ScrollView
      className="ShoppingMallPage"
      scrollY
      lowerThreshold={240}
      onScrollToLower={showNextRecommendProduct}
    >
      <View className="ShoppingMallContent">
        <TheAdvert alias="_scsylb" className="advert" />

        <View className="tipInfo">
          <View className="opItem">
            <Image className="opIcon" src={pTipHtzx} />
            <Text className="text">太湖甄选</Text>
          </View>
          <View className="opItem">
            <Image className="opIcon" src={pTipPzbz} />
            <Text className="text">品质保障</Text>
          </View>
          <View className="opItem">
            <Image className="opIcon" src={pTipJcdj} />
            <Text className="text">击穿底价</Text>
          </View>
        </View>

        <View className="classifyArea">
          {shopIndustryAdjust.length > 0 &&
            shopIndustryAdjust.map((item, idx) => (
              <View
                className="opItem"
                onClick={() => pageNavigateTo(item)}
                key={'classifyArea' + idx}
              >
                <Image className="opIcon" src={item.imgUrl} />
                <Text className="text">{item.name}</Text>
              </View>
            ))}
        </View>

        <View className="cheaperArea">
          <View className="headerLine" onClick={() => goCheaper()}>
            <Image className="title" src={pZheKouTitle} />
            <View className="more">
              <Text className="text">更多低价限时抢购</Text>
              <Image className="iconRight" src={pRightGray} />
            </View>
          </View>
          <View className={['productList', cheaperProductList.length < 4 && 'prolm'].join(' ')}>
            {cheaperProductList.length > 0 &&
              cheaperProductList.map((product, index) => (
                <View
                  className={['product', cheaperProductList.length < 4 && 'prom'].join(' ')}
                  onClick={() => utils.goGoodDetail(product, dispatch)}
                  key={'cheaperProduct_' + index}
                >
                  <View className="upImg">
                    <Imagelocation
                      className="picture"
                      src={
                        product.url?.indexOf('http') === 0 ? product.url : sourceUrl + product.url
                      }
                    />
                    {product.activityType === 3 && (
                      <Image className="activeIcon zhekou" src={pZhekou} />
                    )}
                  </View>
                  <View className="priceLine Current">¥{product.price}</View>
                  <View className="priceLine Origin">¥{product.maxPrice}</View>
                </View>
              ))}
          </View>
        </View>

        <View className="hot-activity">
          <Advert alias="_rmhd" />
        </View>

        <View className="industry-theme">
          <Theme
            themeGoods={recProductList}
            recProductParams={recProductParams}
            dispatch={dispatch}
          />
        </View>
      </View>
    </ScrollView>
  );
};

export default connect(({ loading, productList, otherApi }) => ({
  cheaperProductList: productList.cheaperProductList,
  recProductList: productList.recProductList,
  recProductParams: productList.recProductParams,
  recProductFinished: productList.recProductFinished,
  shopIndustryAdjust: otherApi.shopIndustryAdjust,
  loading,
}))(WrapPageLoadLoading(WelfarePage, { once: true }));
